<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制界面</title>
    <link rel="stylesheet" href="css/controlCo.css">
</head>
<body>
    <!-- 头部的盒子 -->
    <header>
        <h1>控制界面</h1>
        <div class="showTime"></div>
        <script>
          var t = null;
          t = setTimeout(time, 1000); //開始运行
          function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
              "当前时间：" +
              y +
              "年" +
              mt +
              "月" +
              day +
              "日" +
              "-" +
              h +
              "时" +
              m +
              "分" +
              s +
              "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
          }
        </script>
      </header>
    <div class="title w">
        <div style="display: inline-block;height: 30px;font-size: 25px; color: aliceblue;">CO2调节</div>  

        <div style="float: right; color: aliceblue;line-height: 30px;">
          <label for="temperature">CO2阈值：</label>
          <input type="number" id="temperature" min="1000" max="4300" step="1" value="4000">
          <span></span>  
        </div>

    </div>
    <div class="main content w">
        <div class="chart">图标</div>
        <div class="footer"></div>
    </div>o

    <script src="js/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- <script src="js/controlCo.js"></script> -->
    <script>
      function fetchcoitems(){          
        $.ajax(
          {
            type:"get",
            url:"http://127.0.0.1:8080/turn/CO2",
            success:function(result){
              
              let timer = [];
              let temp =[];
              for(let item of Object.keys(result)){
                timer.push(item);
                temp.push(result[item])
                
              }
                console.log(timer)
                console.log(temp)
              var yearData = [
                {
                  year: "2020", // 年份
                  data: [temp]
                }
              ];
              // 1. 实例化对象
              var myChart = echarts.init(document.querySelector(".main .chart"));
              // 2.指定配置
              var option = {
                // 通过这个color修改两条线的颜色
                color: ["#00f2f1", "#ed3f35","#ede640"],
                tooltip: {
                  trigger: "axis"
                },
                legend: {
                  // 如果series对象有name 值，则legend可以不用写data
                  // 修改图例组件 文字颜色
                  textStyle: {
                    color: "#4c9bfd"
                  },
                  // 这个10% 必须加引号
                  right: "10%"
                },
                grid: {
                  //控制图表大小
                  top: "8%",
                  left: "3%",
                  right: "4%",
                  bottom: "3%",
                  show: true, // 显示边框
                  borderColor: "#012f4a", // 边框颜色
                  containLabel: true // 包含刻度文字在内
                },
                toolbox:{
                  feature:{
                    saveAsImage:{}
                  }
                },
              
                xAxis: {
                  type: "category",
                  boundaryGap: false,
                  data: timer,
                  axisTick: {
                    show: false // 去除刻度线
                  },
                  axisLabel: {
                    color: "#4c9bfd" // 文本颜色
                  },
                  axisLine: {
                    show: false // 去除轴线
                  }
                },
                yAxis: {
                  type: "value",
                  axisTick: {
                    show: false // 去除刻度线
                  },
                  axisLabel: {
                    color: "#4c9bfd" // 文本颜色
                  },
                  axisLine: {
                    show: false // 去除轴线
                  },
                  splitLine: {
                    lineStyle: {
                      color: "#012f4a" // 分割线颜色
                    }
                  },
                min: 750,
                max: 4100,
                interval: 200,
                },
                series: [
                  {
                    name: "CO2",
                    type: "line",
                    // true 可以让我们的折线显示带有弧度
                    smooth: true,
                    data: yearData[0].data[0]
                  },
                ]
              };
              
              // 3. 把配置给实例对象
              myChart.setOption(option);
              // 4. 让图表跟随屏幕自动的去适应
              window.addEventListener("resize", function() {
                myChart.resize();
                } 
              );

            }
          }
        )
      }

      (function() {
        setInterval(fetchcoitems,2000)
        })();

    </script>


    <script src="js/echarts.min.js"></script>


</body>
</html>